<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业五升级版</title>
		<link rel="stylesheet" href="/homework/web/base/layui/css/layui.css" />	
		<script type="text/javascript" src="/homework/web/base/layui/layui.all.js"></script>
	</head>
	<body>
		<fieldset class="layui-elem-field layui-field-title">
			<legend>表格数据维护</legend>
			<div class="layui-field-box">
				<form id='d1' class="layui-form" lay-filter='test1'>
				<div class="layui-form-item">
					<label class="layui-form-label">姓名</label>
					<div class="layui-input-inline">
						<input type="text" id='name2' class="layui-input" placeholder="请输入查询的姓名" />
					</div>
					<label class="layui-form-label">地址：</label>
					<div class="layui-input-inline">
						<select id='dizhi' lay-search>
							<option value="北京">北京</option>
							<option value="上海">上海</option>
							<option value="广州">广州</option>
							<option value="深圳">深圳</option>
						</select>
					</div>
					<input type="button" id='sel' value="搜索" class="layui-btn" />
					<button type = "button" class="layui-btn" id='add'>添加</button>
				</div>
				<table class="layui-table" style="width: 99%;">
					<thead>
						<tr>
							<th style="width: 5%;">ID</th>
							<th style="width: 10%;">姓名</th>
							<th style="width: 20%;">生日</th>
							<th style="width: 10%;">性别</th>
							<th style="width: 30%;">爱好</th>
							<th style="width: 10%;">地址</th>
							<th style="width: 20%;">操作</th>
						</tr>
					</thead>
					<tbody id='tbody'></tbody>
				</table>
				</form>
			</div>
		</fieldset>

		<script type="text/javascript">
			//用jquery的动态绑定
			var $ = layui.jquery;
			var layer = layui.layer;
			var laydate = layui.laydate;
			var form = layui.form;
			var element=layui.element;


			$("#add").click(openDialog);
			$("#sel").click(testSelect);

			function openDialog() {
				//layer.msg("123")
				//layer.open做弹出层
				layer.open({
					type: 1,
					title: "信息维护",
					closeBtn: 2,
					area: ["400px", "460px"],
					shadeClose: true,
					content: $("#aa").html(), //现实的内容
					
					success: function() {
						dateRender('tTime'),
							rend2(),
							$("#sure").click(testAdd), //确认，把数据添加到表格里
							$("#cancel").click(closeLayer);

					}

				})
			}
			//点击添加--把数据添加到表格里
			//把输入的内容取出来--放入表格里--用字符串的拼接
			var id = 1;
			function testAdd() {
				var name = $("#name").val() //得到所输入的姓名
				var time = $("#tTime").val() //得到所选择的出生日期
				//得到单选框的值
				var sex = $("input[type='radio']:checked").val();
				//得到复选框的值
				var hobby = '';
				$("input[type='checkbox']:checked").each(function() {
					hobby += $(this).val() + ' ';
				});
				//得到下拉选项的值
				var addrss = $("#myselectc option:checked").val();
				//放到表格里,字符串拼接必须会！！！
				var html = "" +
					"<tr id='tr" + id + "'>" +
					"<td id='tda" + id + "'>" + id + "</td>" +
					"<td id='tdb" + id + "'>" + name + "</td>" +
					"<td id='tdc" + id + "'>" + time + "</td>" +
					"<td id='tde" + id + "'>" + sex + "</td>" +
					"<td id='tdf" + id + "'>" + hobby + "</td>" +
					"<td id='tdg" + id + "'>" + addrss + "</td>" +
					"<td id='tdd" + id + "'><a href='javascript:testDel(" + id +
					");' class='layui-btn layui-btn-xs layui-btn-danger'>删除</a> <a href='javascript:testUpd(" + id +
					");' class='layui-btn layui-btn-xs'>修改</a></td>" +
					"</tr>"
				$("tbody").append(html);
				id++;
				closeLayer();


			}
			//点击取消
			function closeLayer() {
				layer.close(layer.index) //关闭最新弹出的层
			}

			//删除
			function testDel(id) {
				layer.confirm("是否删除该行记录?", function(index) {
					$("#tr" + id).remove();
					layer.close(index);
				})

			}
			//修改
			function testUpd(vid) {
				layer.open({
					type: 1,
					title: "信息维护",
					closeBtn: 2,
					area: ["400px", "460px"],
					shadeClose: true,
					content: $("#aa").html(), //弹出框内容
					success: function() {
						dateRender('tTime'), //渲染时间日期
							rend2(), //渲染表单
							$("#cancel").click(closeLayer);

						//把回显的数据取出来
						var name = $("#tdb" + vid).html()
						var time = $("#tdc" + vid).html()
						var sex = $("#tde" + vid).html()
						var hobby = $("#tdf" + vid).html()
						var addrss = $("#tdg" + vid).html()
						//把会显得数据放入
						form.val("test2",{
							"xingming":name,
							"shengri":time,
							"gender":sex,
							"test":hobby,//只能附上第一个复选框的值
							"di":addrss
							
						});
                        
						$("#sure").click({
							vid: vid
						}, testSave);
					}

				})
			}

			//修改之后保存下来的数据,html($("input[type='radio']").val())--往里放数据
			function testSave(event) {
				var vid = event.data.vid; //取出来参数
				var hobby = '';
				$("input[type='checkbox']:checked").each(function() {
					hobby += $(this).val() + ' ';
				});
				$("#tdb" + vid).html($("#name").val())
				$("#tdc" + vid).html($("#tTime").val())
				$("#tde" + vid).html($("input[name='gender']:checked").val())
				$("#tdf" + vid).html(hobby)
				$("#tdg" + vid).html($("#myselectc option:checked").val())
				$("#tdd" + vid).html("<a href='javascript:testDel(" + vid +
					");' class='layui-btn layui-btn-xs layui-btn-danger'>删除</a> <a href='javascript:testUpd(" + vid +
					");' class='layui-btn layui-btn-xs'>修改</a>")
				closeLayer()


			}
			
			
			//搜索
			function testSelect() {
				$("tr").css("background-color", "")
				var val = $("#name2").val();
				var val2 = $("#dizhi option:checked").val();

				if (val != '') {
					$("tr").each(
							function() {
								if ($(this).find("td[id^='tdb']").text()
										.indexOf(val) > -1) {
									$(this).css("background-color", "green");
								}

							})
				}

				if (val2 != '') {
					$("tr").each(
							function() {
								if ($(this).find("td[id^='tdg']").text()
										.indexOf(val2) > -1) {
									$(this).css("background-color", "green");
								}
							})
				}

			}

			//渲染laydate
			function dateRender(id) { //在
				laydate.render({
					elem : "#" + id, //渲染的标签是什么
					type : "date" //渲染的类型是什么
				})
			}

			//渲染id='aa'  <form>表单
			function rend2() {
				form.render(null, 'test2')
			}
			//渲染第一个表单
			form.render(null, 'test1');
		</script>

		<!-- 不会显示在网页上，但是可以拿来用---模板 -->
		<script type="text/html" id="aa">
			<fieldset class="layui-elem-field layui-field-title" style="margin:20px 20px 0px;">
			  <legend>信息维护</legend>
			  <div class="layui-field-box">
			<form id='d2' class="layui-form layui-form-pane"  lay-filter='test2'>
				<div class="layui-form-item">
					<label class="layui-form-label">姓名：</label>
					<div class="layui-input-inline">
						<input type="text" id='name' name='xingming' placeholder="必填" class="layui-input"/>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">生日：</label>
					<div class="layui-input-inline">
						<input type="text" id='tTime' name='shengri' class="layui-input" placeholder="请输入生日" />
					</div>		    		
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">性别：</label>
					<div class="layui-input-inline">
						<input type="radio" id='n1' name="gender" value="男" title="男" checked/>
						<input type="radio" id='n2' name="gender" value="女" title="女" checked/>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">爱好：</label>
					<div class="layui-input-inline">
						<input type="checkbox"   name="test" value="协作" title="协作" />
						<input type="checkbox"   name="test" value="阅读" title="阅读" />
						<input type="checkbox"   name="test" value="音乐" title="音乐" />
					</div>   
							<!-- value="",可自定义，如果不设置则默认值为on -->
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">地址：</label>
					<div class="layui-input-inline" >
						<select id="myselectc" name='di'>
							<option value="北京">北京</option>
							<option value="上海">上海</option>
							<option value="广州">广州</option>
							<option value="深圳">深圳</option>
						</select>
					</div>			
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"></label>
					<div class="layui-input-inline">
						<input type="button" id='sure' class="layui-btn" value="确定" />
						<input type="button" id='cancel' class="layui-btn" value="取消" />
					</div>
				</div>
			</form>
			</div>
			</fieldset>
		</script>
		<!-- 模板引擎 -->
		<script type="text/html">
			<tr id='tr{{ d.id }}'>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			</tr>
		</script>


	</body>
</html>

